<template>
  <div>
    <div class="columns">
      <div class="column is-full">
        <el-card class="box-card" shadow="never">
          <el-col :md="11">
            <el-card shadow="hover" class="cube-card">
              <div class="head">
                <div class="choose">
                  店铺号：
                  <el-select v-model="storeId" placeholder="请选择店铺id" @change="getStoreMoneyDay(storeId)">
                    <el-option
                        v-for="item in storeList"
                        :key="item"
                        :label="item"
                        :value="item">
                    </el-option>
                  </el-select>
                </div>
                <h3>日销售数据</h3>
              </div>
              <el-row :gutter="12">
                <el-col :span="8">
                  <div class="showTitle">今日营业额</div>
                  <div class="sub-title">{{ moneyToday }}元</div>
                </el-col>
                <el-col :span="8">
                  <div class="showTitle">昨日营业额</div>
                  <div class="sub-title">{{ moneyYestoday }}元</div>
                </el-col>
                <el-col :span="6">
                  <div class="showTitle">同比增长</div>
                  <div class="sub-title">{{ (moneyToday-moneyYestoday)/moneyYestoday*100 | numFilter  }}%</div>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
          <el-col :md="2"><div class="block"></div></el-col>
          <el-col :md="11">
            <el-card shadow="hover" class="cube-card">
              <div class="head">
                <div class="choose">
                  店铺号：
                  <el-select v-model="storeId2" placeholder="请选择店铺id" @change="getStoreMoneyWeek(storeId)">
                    <el-option
                        v-for="item in storeList2"
                        :key="item"
                        :label="item"
                        :value="item">
                    </el-option>
                  </el-select>
                </div>
                <h3>周销售数据</h3>
              </div>
              <el-row :gutter="12">
                <el-col :span="8">
                  <div class="showTitle">本周营业额</div>
                  <div class="sub-title">{{ moneyThisWeek }}元</div>
                </el-col>
                <el-col :span="8">
                  <div class="showTitle">上周营业额</div>
                  <div class="sub-title">{{ moneyLastWeek }}元</div>
                </el-col>
                <el-col :span="6">
                  <div class="showTitle">同比增长</div>
                  <div class="sub-title">{{ (moneyThisWeek-moneyLastWeek)/moneyLastWeek*100 | numFilter }}%</div>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
          <el-col :md="11">
            <el-card shadow="hover" class="cube-card">
              <div class="head2">
                <h3>最畅销单品</h3>
              </div>
              <el-row :gutter="12">
                <h2 class="itemTitle">海苔鸡排饭团!</h2>
                <span>本周共计卖出 {{ this.bestSellingCount}} 份</span>
                <img src="https://s4.ax1x.com/2021/12/21/TMGKRs.png" alt="TMGKRs.png" border="0" />
              </el-row>
            </el-card>
          </el-col>
        </el-card>

      </div>

    </div>
  </div>
</template>

<script>
import {getCashFlow, getCashStoreFlow, getBestSelling, getBestSellingCount} from "@/api/order";

export default {
  name: "Home",
  data() {
    return {
      diff: [{}],
      type: 1,
      storeId: 1001,
      storeId2: 1001,
      storeList: [1001, 1002, 1003],
      storeList2: [1001, 1002, 1003],
      moneyToday: null,
      moneyYestoday: null,
      moneyThisWeek: null,
      moneyLastWeek: null,
      bestSellingItem: null,
      bestSellingCount: null
    }
  },
  filters: {
    numFilter (value) {
      // 截取当前数据到小数点后两位
      let realVal = parseFloat(value).toFixed(2)
      return realVal
    }
  },
  mounted() {
    this.getStoreMoneyDay(this.storeId);
    this.getStoreMoneyWeek(this.storeId);
    this.getBestSellingItem();
    this.getBestSellingCountHere();
  },
  methods: {
    getStoreMoneyDay(storeId) {
      getCashStoreFlow(0,storeId).then((data)=>{
        this.moneyToday=data.data;
        getCashStoreFlow(1,storeId).then((data)=>{
          this.moneyYestoday=data.data-this.moneyToday;
          if (this.moneyYestoday<0){
            this.moneyYestoday=0;
          }
        });
      });

    },

    getStoreMoneyWeek(storeId) {
      getCashStoreFlow(7,storeId).then((data)=>{
        this.moneyThisWeek=data.data;
        getCashStoreFlow(14,storeId).then((data)=>{
          this.moneyLastWeek=data.data-this.moneyThisWeek;
          if (this.moneyLastWeek<0){
            this.moneyLastWeek=0;
          }
        });
      });
    },

    getBestSellingItem() {
      getBestSelling().then((data)=>{
        this.bestSellingItem=data.data;
      })
    },

    getBestSellingCountHere() {
      getBestSellingCount().then((data)=>{
        this.bestSellingCount=data.data;
      })
    }
  }
}
</script>

<style>
.head {
  height: 120px;
}

.head > h3 {
  font-size: 20px;
  font-weight: bold;
}

.head2 {
  height: 60px;
}

.head2 > h3 {
  font-size: 20px;
  font-weight: bold;
}

.showTitle {
  height: 40px;
  font-weight: bold;
  font-size: 16px;
}

.sub-title {
  font-size: 16px;
}

.itemTitle {
  height: 30px;
  font-size: 15px;
  font-weight: bold;
}
.choose {
  height: 60px;
  padding-bottom: 20px;
}

.block{
  height: 20px;
}
</style>
